import React from 'react';
import ReactDOM from 'react-dom';
// import Greeting from './common/Greeting';
import 'bootstrap/dist/css/bootstrap.min.css'
import '../style/index.css';

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: true,
            id: '',
            password: '',
            name: props.name || '',
            data: ''
        };
        document.title = '首页';
    }

    componentDidMount() {
        // this.updateData();
    }

    handleChange(e) {
        let className = e.target.className;
        let value = e.target.value;

        console.log(className, ': ', value);

        this.setState({
            [className]: value
        })
    }

    login() {
        console.log('登录');
        let {id, password} = this.state;
        let param = { id, password };
        console.log(param);
        $.ajax({
            type: 'POST',
            url: 'http://localhost:3000/login',
            // dataType: 'json',
            data: param,
            timeout: 10000,
            success: function (data) {
                console.log('data: ', data);
                // that.setState({
                //     data: JSON.stringify(data)
                // });
                // alert('登录成功');
                location.href = './login.html';
            },
            error: function (xhr, type) {
                console.log(xhr);
                console.log(type);
            }
        });
    }

    register() {
        console.log('注册');
    }

    render() {
        // let name = this.state.name || this.props.name || 'ha...';
        let { id, password, data } = this.state;
        // console.log('jquery test: ', $.isArray([]));

        return (
            <div>
                <div className="loginDiv">
                    <div className="loginCell" style={{paddingBottom: '0'}}>
                        <span>账户：</span>
                        <input className="id" onChange={this.handleChange.bind(this)} type="text" value={id} />
                    </div>
                    <div className="loginCell">
                        <span>密码：</span>
                        <input className="password" onChange={this.handleChange.bind(this)} type="password" value={password} />
                    </div>
                    <div className="subCell">
                        <span onClick={this.login.bind(this)}>登录</span>
                        <span onClick={this.register.bind(this)}>注册</span>
                    </div>
                </div>
            </div>
        )
    }
}

ReactDOM.render(
    <Index />,
    document.getElementById('app')
);